<template>
  <div class="main">
    <div class="device">
      <div @click="deviceData.show = true" class="dleft">
        <span style="font-weight: 500">空调</span>
        <!-- <img style="width: 10vw;" src="@svg/device.svg"/> -->
      </div>
      <div @click="deviceData.show = true" class="dmid">
        <span
          ><img
            align="absmiddle"
            style="width: 5vw"
            src="@/assets/svg/id.svg"
          />&nbsp;ID: {{ deviceData.ID }}</span
        >
        <span
          ><img
            align="absmiddle"
            style="width: 5vw"
            src="@/assets/svg/temp.svg"
          />&nbsp;室内温度: {{ deviceData.TE }}°C</span
        >
        <span
          ><img
            align="absmiddle"
            style="width: 5vw"
            src="@/assets/svg/humi.svg"
          />&nbsp;室内湿度: {{ deviceData.HU }}%</span
        >
        <span
          ><img
            align="absmiddle"
            style="width: 5vw"
            src="@/assets/svg/device.svg"
          />&nbsp;状态: {{ deviceData.state }}</span
        >
      </div>
      <div class="dright">
        <van-switch
          v-model="deviceData.powerState"
          size="24px"
          :loading="deviceData.load"
          @change="onStateChange(deviceData)"
        />
      </div>
    </div>
  </div>
</template>

<script>
//import { Dialog } from 'vant';
import { Toast } from "vant";
var send = {};
export default {
  props: {
    id: Number,
    pub: String,
    sub: String,
  },
  components: {},
  created: function () {
    this.mqttMsg();
  },
  data() {
    return {
      deviceData: {
        ID: this.id,
        TE: "--",
        HU: "--",
        powerState: null,
        load: false,
        state: "离线",
      },
    };
  },
  methods: {
    onStateChange(detail) {
      navigator.vibrate(100);
      this.deviceData.load = true;
      send = {};
      send["LEDM"] = detail.powerState === true ? "1" : "0";
      console.log(send);
      this.$mqtt.publish(this.sub, send);
      if (detail.powerState) {
        this.deviceData.state = "正在启动";
      } else {
        this.deviceData.state = "正在关机";
      }
    },
    mqttMsg() {
      // 接收消息处理
      this.$mqtt.message(this.pub, (topic, message) => {
        console.log(message.toString()); //控制台显示接收到的数据
        try {
          this.res = JSON.parse(message.toString());
          this.deviceData.ID = this.res.ID;
          this.deviceData.TE = this.res.Temp;
          this.deviceData.HU = this.res.Humi;
          if (this.deviceData.load) {
            if (this.deviceData.powerState === (this.res.LEDM < 3200 ? true  : false)) {
              this.deviceData.load = false;
            }
          } else {
            this.deviceData.powerState = this.res.LEDM < 3200 ? true : false;
            if (this.deviceData.powerState) {
              this.deviceData.state = "运行中";
            } else {
              this.deviceData.state = "关机";
            }
          }
        } catch (err) {
          console.log(err.message);
        }
      });
    },
  },
};
</script>
<style scoped>
.content {
  padding: 10px 16px;
}
.main {
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px 20px 10px 20px;
}
.device {
  transition: 0.3s;
  position: relative;
  z-index: 1;
  width: 100vw;
  height: auto;
  display: flex;
  justify-content: left;
  align-items: center;
  border-radius: 20px;
  text-align: left;
  padding: 10px 10px;
  box-shadow: 0px 0px 12px 0 rgb(0 0 0 / 8%);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
}
.dleft {
  flex: 0 0 20vw;
  width: 50px;
  text-align: center;
  order: -1; /* 让 #left 居于左侧 */
}
.dmid {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 10px;
  font-size: 4vw;
}
.dright {
  flex: 0 0 20vw;
  text-align: center;
}
.custom-button {
  width: auto;
  padding: 5px 10px;
  color: #fff;
  font-size: 4vw;
  line-height: 5vw;
  text-align: center;
  background-color: #0aadee;
  border-radius: 20px;
}
</style>
